<template>
  <div class="item">
    <div class="img">
      <router-link :to="{ name: 'houseDetail', params: { id: item.id } }">
        <img :src="displayImage" alt="">
      </router-link>
    </div>
    <div class="info">
      <router-link :to="{ name: 'houseDetail', params: { id: item.id } }">
        <div class="title">
          <h1>{{ item.title }}</h1>
          <p>{{ item.city + item.area + item.address }}</p>
        </div>
      </router-link>
      <div class="price">
        <span>
          <p>¥ {{ item.monthRent }}</p> /月
        </span>
      </div>
    </div>
    <div class="info2">
      <div class="left">
        <span> {{ item.bedroom }}卧室 </span>
        <span> {{ item.parlour }}客厅 </span>
        <span> {{ item.toilet }}卫生间 </span>
        <span> {{ item.capacity }}㎡ </span>
        <span style="font-weight: 600"> {{ item.rentType }}</span>
      </div>
      <div class="right">
        <i :class="[star ? 'el-icon-star-off star' : 'el-icon-star-off']" @click="collect(item)"></i>
      </div>
    </div>
  </div>
</template>

<script>

import axios from "axios";

const userFlag = JSON.parse(localStorage.getItem('login-user'))
export default {
  name: 'houseItem',
  props: {
    item: {
      type: Object,
      default: () => { }
    }
  },
  mounted() {
    if (userFlag!==null){
      this.collectFlag()
    }
  },
  computed: {
    // 计算属性，获取第一张图片
    displayImage() {
      if (this.item.imgUrl && this.item.imgUrl.length > 0) {
        return this.item.imgUrl[0]; // 返回第一张图片
      }
    },
  },
  data(){
    return {
      star:false,
    }
  },
  methods: {
    // 页面显示后的收藏判断，根据收藏结果显示不同图标，需要的数据：房屋id,当前用户id
    collectFlag(){
      axios({
        url:"http://localhost:8090/collect/collectStar",
        methods: 'get',
        params: {
          houseId: this.item.id
        }
      }).then(res=>{
        if (res.code === '200'){
          this.star = false
        }else{
          this.star = true
        }
      })
    },

    //点击收藏按钮后的相关操作
    collect() {
      //判断是否登录
      if (userFlag == null){
        this.$message.warning('请先登录！')
        return;
      }
      //判断是否是租客账号
      if(userFlag.role !== '租客'){
        this.$message.warning('只有租客账号才能收藏房屋')
        return;
      }
      //判断是否已经收藏
      axios({
        url: "http://localhost:8090/collect/select",
        method: 'post',
        data: {
          houseId: this.item.id
        }
      }).then(res => {
        //若还未收藏,则收藏
        if (res.code === '400') {
          axios({
            url: "http://localhost:8090/collect/create",
            method: 'post',
            data: {
              houseId: this.item.id
            }
          }).then(res => {
            if (res.code === '200'){
              this.star = true;
              this.$message.success("收藏成功！")
            }
          })
        } else if (res.code === '200'){
          axios({
            url: "http://localhost:8090/collect/delete",
            method: 'delete',
            data: {
              houseId: this.item.id
            }
          }).then(res => {
            if (res.code === '200'){
              this.star = false;
              this.$message.success("取消收藏成功！")
            }
          })
        }
      })
    },
  },
}
</script>

<style scoped>
a {
  text-decoration: none;
  color: #333;
}

.item {
  width: 320px;
  height: 400px;
  border-radius: 5px;
  background-color: white;
}

.item img {
  width: 100%;
  height: 220px;
}

.info {
  padding: 5px 10px 3px 10px;
  border-bottom: 1px solid #ccc;
  position: relative;
  height: 135px;
}

.info h1 {
  font-size: 18px;
  font-weight: 600;
}

.info .title p {
  font-size: 14px;
  color: #777;
  padding-top: 3px;
}

.info .price {
  position: absolute;
  top: 65px;
  left: 10px;
  color: #777;
}

.price p {
  display: inline-block;
  font-size: 25px;
  color: #4b5eff;
  font-weight: 600;
}

.info2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  height: 28px;
}

.info2 .left {
  display: flex;
  gap: 8px; /* 调整间距 */
  font-size: 14px;
  color: #777;
}

.right .star {
  background-color: #6674f6;
  padding: 6px;
  color: white;
  border: none;
}

.el-icon-star-off {
  color: #777;
  font-size: 16px;
  cursor: pointer;
  border: 1px solid #8f8e8e;
  padding: 4px;
  border-radius: 50%;
}
</style>